<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我要吐槽</title>
		
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<link rel="stylesheet" href="../css/head.css" />
		<link rel="stylesheet" href="../css/tucao.css" />
	</head>
	<body>
		<!--头部-->
    <div class="head">
    			<a href="###">
            		<img src="../img/left_fan.png" alt="" class="img_fan"/>
            </a>
        <h2>我要吐槽</h2>
        <a></a>
    </div>
    
    <div class="content">
    		<span class="idea">反馈意见</span>
    		<span id="num">(0/200)</span>
    		<textarea name="" id="areaTxt" placeholder="请输入您的意见,最多200个字哦!" onInput="inputFun(textare)"></textarea>
    		<div class="success">吐槽成功,谢谢支持!</div>
    		<div class="qqNum">
    			<span>联系方式:</span><input type="number" placeholder="请填写您的手机号或qq号"  id="numPhone"/>
    		</div>
    		<div id="btnDiv">提交</div>
    </div>
    
    <!--蒙板-->
    <div id="mengDiv">
    		
    </div>
    <div id="errDiv">
	    <div class="errorDiv">
	    			<div class="errTop"><img src="../img/error.png" alt="" /><span>提交错误</span><img src="../img/close.png" alt="" id="closeErr"/></div>
	    			<div class="errBottom">
	    				<p>提交内容超过200个字</p>
	    				<div id="errBtn">确定</div>
	    			</div>
	    	</div>
	</div>
		<ul class="dd">
           <li><a href=""><img src="../img/1.png" alt="" /></a><p>首页</p></li>
           <li><a href="video.html"><img src="../img/2.png" alt="" /></a><p>视频</p></li>
           <li><a href="store.html"><img src="../img/3.png" alt="" /></a><p>商城</p></li>
           <li><a href="fifty-mine.html"><img src="../img/a3.png" alt="" /></a><p>我的</p></li>
       </ul>
	</body>
	<script type="text/javascript" src="../js/zepto.min.js"></script>
	<script type="text/javascript">
	var textare = document.getElementById('areaTxt')
	var a=0;
	var timer;
	
		$('#btnDiv').click(function(){

			checkPhone();
			if (a>200||a==0){
				$('#mengDiv').css({
					display:'block'
				})
				$('#errDiv').css({
					display:'block'
				})
			}else{
				textare.value=null;
				$('.success').css({
						display:'block'
					})
				clearInterval(timer)
				timer = setInterval(function(){
					$('.success').css({
						display:'none'
					})
				},2000)
				
			}
		})
		
		$('#errBtn').click(function(){
			$('#mengDiv').css({
				display:'none'
			})
			$('#errDiv').css({
				display:'none'
			})
		})
	
		function inputFun(x) {
			
		a =x.value.length;
		num.innerHTML ='('+a+'/200)';
		
	}
	//手机号码或qq正则
	function checkPhone(){
    var phone = document.getElementById('numPhone').value;
    if(!(/^1[34578]\d{9}$/.test(phone)||/^\d{5,10}$/.test(phone))){
        alert("请输入正确的手机号或qq号");
        return false; 
    } 
}
	</script>
</html>
